<template>
  <info-container :title=title class="table-layout">
    <!-- 测试组件库是否注册 -->
    <!-- <el-icon>
      <Stopwatch />
    </el-icon> -->
    <el-container class="table-container">
      <el-row>
        <el-table :data="tableData" :show-header="false" :border="true">
          <el-table-column class-name="first_column" label="Metrics" width="180">
            <!-- label用于定义表头，prop是变量值 -->
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon style="margin-right: 5px;">
                  <Stopwatch v-if="scope.row.metrics == '模型训练时间' || scope.row.metrics === '平均响应时间'" />
                  <Cpu v-if="scope.row.metrics == '模型精度' || scope.row.metrics === '平均能耗'" />
                  <Coin v-if="scope.row.metrics == '通信开销'" />
                  <Folder v-if="scope.row.metrics == '模型大小'" />
                  <Timer v-if="scope.row.metrics == '决策时间'" />
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.metrics }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tValue" label="tValue" width="100">
          </el-table-column>
        </el-table>
      </el-row>
    </el-container>
  </info-container>
</template>

<script>
import TheLineChart from "./TheLineChart.vue";
import InfoContainer from "./InfoContainer.vue"
export default {
  name: "CompTable",
  components: {
    InfoContainer,
    TheLineChart
  },
  props: {
    showChart: {
      type: Boolean,
      required: false,
      default: () => {
        return true
      }
    }, tableData: {
      type: Array,
      required: false,
      default: [
        { metrics: "模型训练时间", tValue: "5858s" },
        { metrics: "模型精度", tValue: "76%" },
        { metrics: "通信开销", tValue: " 3211MB" },
        { metrics: "模型大小", tValue: "140MB" }
      ]
    }
  }
  ,
  data() {
    return {
      title: "基准策略",
      tableData: this.tableData
    };

  },

  methods: {

  }
};
</script>
<style lang="scss">
$table-width: 100%;
$table-height: 233px;

.first_column {
  background-color: rgb(245, 247, 250) !important;

  .cell {
    background-color: rgb(245, 247, 250) !important;
  }
}

.table-layout {
  width: $table-width;
  // height: $table-height;


  .table-container {
    height: 100%;

    .table-header {
      height: 20%;
      margin-bottom: 20px;
    }

    .table-main {
      height: 100%;
      padding: 0;

      .the-line-chart {
        width: 100%;
        height: 230px;
        color: black
      }
    }
  }
}
</style>